<template>
  <view>
    <reftable-header :data="data?.header" :debug="data?._debug.header" @clicked="onTableRowClicked"></reftable-header>
    
  <el-card header="Reftable Footer">    
    <el-table :data="dataTable" :show-header="true" :highlight-current-row="true" :stripe="true" row-class-name="primary" style="width: 100%" @row-click="onTableRowClicked">
      <el-table-column prop="label" label="key"></el-table-column>
      <el-table-column prop="value" label="val"></el-table-column>
      <el-table-column prop="desc" label="des"></el-table-column>
    </el-table>
  </el-card>
  </view>
</template>

<script>
import ReftableHeader from './Header.vue';

export default {
  components: {
    ReftableHeader,
  },
  props: {
    data: Object,
    debug: Object,
  },
  data() {
    return {
      dataTable: [],
    };
  },
  created() {
    console.log("this.data", this.data);
  },
  watch: {
    data(newVal, oldVal) {
      this.dataTable = this.covertToTable(newVal);
    },
  },
  methods: {
    covertToTable(data) {
      return [
        { 
          "label": "ref_index_position", 
          "value": Formater.number(data.refIndexPosition, 16), 
          "desc": "",
          "debug": data._debug.refIndexPosition,
        },
        { 
          "label": "object_position", 
          "value": Formater.number(data.objectPosition, 16), 
          "desc": "前59位",
          "debug": data._debug.objectInfo,
        },
        { 
          "label": "object_id_length", 
          "value": Formater.number(data.objectIdLen), 
          "desc": "后5位",
          "debug": data._debug.objectInfo,
        },
        { 
          "label": "object_index_position", 
          "value": Formater.number(data.objectIndexPosition, 16), 
          "desc": "",
          "debug": data._debug.objectIndexPosition,
        },
        { 
          "label": "log_position", 
          "value": Formater.number(data.logPosition, 16), 
          "desc": "",
          "debug": data._debug.logPosition,
        },
        { 
          "label": "log_index_position", 
          "value": Formater.number(data.logIndexPosition, 16), 
          "desc": "",
          "debug": data._debug.logIndexPosition,
        },
        { 
          "label": "crc32", 
          "value": Formater.number(data.crc32, 8), 
          "desc": "",
          "debug": data._debug.crc32,
        },
      ];
    },
    
    onTableRowClicked(row, column, event) {
      this.$emit('clicked', row);
    },
    
    uintArrayToHexStrings(uintArray) {
      const hexStrings = uintArray.map(byte => `0x${byte.toString(16).padStart(2, '0')}`);
      return `[${hexStrings.join(', ')}]`;    
    },
  },
  mounted() {

  },
  computed: {
    
  }
};
</script>